<template>
	<image src="/static/images/editPoint-bg.png" mode="widthFix" class="bg-img"></image>
	<u-gap height="120"></u-gap>
	<u-form :model="formData" ref="formRef" :label-width="100" :errorType="['toast']">
		<view class="u-p-l-28 u-p-r-28 u-rela">
			<view class="bgw box-radius u-p-t-24 u-p-l-24 u-p-r-24">
				<view>
					<text class="u-font-32">佣金转积分</text>
					<text class="color-red u-font-24 u-p-l-10">佣金转成积分不支持转回，请谨慎操作。</text>
				</view>
				<u-form-item label="" prop="num">
					<view class="u-flex" style="width: 100%;align-items: flex-end;">
						<view class="u-font-28" style="height: 60upx;line-height: 60upx;">
							￥
						</view>
						<view class="u-flex-1">
							<u-input :custom-style="{'font-size':'36upx'}" v-model="formData.total" placeholder="请输入数字" type="number" :clearable="true" />
						</view>
					</view>
				</u-form-item>
				<view class="u-flex u-p-t-24 u-p-b-24">
					<view class="u-flex-1 u-font-24">
						<text class="u-tips-color">佣金可转总额：</text>
						<text class="color-green">￥{{userInfo.balance.dominate}}</text>
						
					</view>
				</view>				
			</view>
		</view>
	</u-form>
	<u-gap height="20"></u-gap>
	<view class="u-p-48">
		<u-button :loading="loading" @click="submit" type="primary" shape="circle">立即转积分</u-button>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import mixins from '@/common/js/mixins.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		modal,
		toastNavBack
	} = proxy.$util;
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const formRef = ref();
	const formData = reactive({
		total: '',
		type: 0,
		pointsStatus: 1
	})
	const formRules = {
		total: [{
			required: true,
			message: '请输入数字',
			trigger: 'blur,change'
		}],
	};
	const loading = ref(false);
	const submit = (e) => {
		// if (!formData.cityData) {
		// 	uni.$u.toast('请选择所在地区');
		// 	return false;
		// }
		let _data = JSON.parse(JSON.stringify(formData));
		_data.total = Number(_data.total);
		formRef.value.validate(async valid => {
			if (valid) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				loading.value = true;
				try {
					let res;
					res = await proxy.$u.api.changePoints(_data);
					let {
						data,
						code,
						msg
					} = res;
					console.log();
					if (code == 200) {
						uni.$emit('point_update')
						toastNavBack('成功')
					} else {
						uni.$u.toast(msg || '错误');
					}
					loading.value = false
				} catch (err) {
					loading.value = false
					uni.$u.toast('错误');
				}
			} else {
				console.log('验证失败');
			}
		});
	}
	onReady(() => {
		formRef.value.setRules(formRules);
	})
	onLoad((d) => {

	})
	onShow(() => {

	})
</script>
<style lang="scss" scoped>
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
	}
</style>